<template>
    <div>
        <div class="ding">
            <div class="one">
                <img src="@/assets/信号.jpg" alt="">
                <test>
                    中国电信
                </test>
                <img src="@/assets/网络.jpg" alt="">
            </div>
            <div>
                <test>
                    9：14AM
                </test>
            </div>
            <div class="two">
                <img src="@/assets/蓝牙.jpg" alt="">
                <test>
                    100%
                </test>
                <img src="@/assets/电量.jpg" alt="">
            </div>
        </div>
        <header>
            <i class="i_down">廊坊<img class="down" src="https://p0.meituan.net/travelcube/45c79a92755b54adc9dc1c4682b123b3201.png" alt=""></i>
            <input type="text" class="search" value="自体脂肪填充">
            <span><img src="@/assets/扫码.jpg" alt="" ></span>
        </header>
        <banner>
            <img src="@/assets/banner1.png" alt="">
        </banner>
        <div class="list">
            <ul>
                  <li>
                      <router-link to="/qiandao"> <img src="@/assets/每日签到.png" alt=""></router-link>
                  </li>
                  <li>
                      每日签到
                  </li>
              </ul>
              <ul>
                  <li>
                      <router-link to="/riji"> <img src="@/assets/精选日记.png" alt=""></router-link>                          
                  </li>
                  <li>
                    精选日记
                  </li>
              </ul>
              <ul>
                  <li>
                      <router-link to="/zhengxin"><img src="@/assets/整形百科.png" alt=""></router-link>
                  </li>
                  <li>
                    整形百科
                  </li>
              </ul>
              <ul>
                  <li>
                      <router-link to="/yisheng"><img src="@/assets/医院医生.png" alt=""></router-link>
                  </li>
                  <li>
                    医院医生
                  </li>
              </ul>
              <ul> 
                  <li>
                      <router-link to="/dujia"><img src="@/assets/独家低价.png" alt=""></router-link>
                  </li>
                  <li>
                    独家低价
                  </li>
              </ul>
        </div>      
    </div>
</template>

<script>
    export default {
        data() {
            return{

            }
        }
    }
</script>

<style lang="scss" scoped>
.ding{
    display: flex;
    font-size: 12px;
    div{
        img{
            width: 16px;
            height: 12px;
        }
    }
    .one{
        margin-left: 5px;
    }
    .two{
        margin-right: 5px;
    }
}
header {
        width: 100%;
        height: 50px;
        //padding-right: 15px;
        display: flex;
        align-items: center;
        // background-color: #FFCA00;
        i{
            font-size: 12px;
            margin-left: 15px;
            .down{
                width: 7px;
                color: #fff;
                margin-left: 5px;
                margin-right: 5px;
            }
        }
        .search {
            margin-left: 20px;
            padding-left: 40px;
            font-size: 0.4rem;
            flex: 1;
            height: 32px;
            color: #A39D8A;
            border-radius: 0.26667rem;
            background: #F6F6F8 url(https://p0.meituan.net/travelcube/99c29829cf1b85d5cdbc76a1bd0b7329814.png) no-repeat;
            background-position: 9px 11px;
            background-size: 14px 14px;
        }
        span img{
            width: 24px;
            padding: 0 0.4rem;
            color: #fff;
        }
    }
    banner{
        img{
            width: 100%;
        }
    }
    .list{
          width: 100%;
          height: 60px;
          background-color: #FFFFFF;
          display: flex;
          ul {
              width: 100%;
              display: flex;
              flex-direction: column;
              padding: 10px;
              li {
                  flex: 1;
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
                  align-items: center;
                  font-size: 12px;
                  img{
                      width: 20px;
                      height: 22px;
                  }
              }
          }
      }
</style>